<template>
  <div ref="wrapperSelect" class="wrapper-common wrapper-app">
    <!-- <Header></Header> -->
    <div id="main">
      <div class="leftside"><Header></Header></div>
      <div class="mainside">
        <router-view />
      </div>
      <div class="rightside"><RightSide></RightSide></div>
    </div>
  </div>
</template>

<script>
import RightSide from './components/rightSide'
import Header from './components/header'
export default {
  components: {
    RightSide,
    Header
  },
  props: {},
  data() {
    return {}
  },
  mounted() {},
  beforeDestroy() {},
  methods: {}
}
</script>
<style>
::-webkit-scrollbar {
  width: 0 !important;
}
#main .el-main {
  padding: 0;
}
#main .el-main {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
#main .el-aside {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
<style lang="scss" scoped>
.wrapper-common {
  height: 100%;
  #main {
    height: 100%;
    display: flex;
    .mainside {
      flex: 1;
    }
    .leftside {
      width: 300px;
      height: 100%;
    }
    .rightside {
      width: 300px;
      height: 100%;
    }
  }
}
// #main {
//   width: 1100px;
//   margin: 0 auto;
// }
</style>
